//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Upload, Icon} from 'antd';
import {project, admin} from '../value';
import '../css/other.css';
import moment from 'moment';
import {config} from "../config";
import {AddAccounts, EditAccounts} from '../components/operateManage';

import {EditorState, convertToRaw, ContentState} from 'draft-js';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

const FormItem = Form.Item;
const confirm = Modal.confirm;

class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchData: {},
            pagination: {current: 1, pageSize: 10, total: 0},
            data: [
                {
                    order_number: 1,
                    admin_number: 122,
                    admin_username: "cbl",
                    admin_account: "acctount123",
                    created_at: '2018-12-12',
                    admin_status: 1
                }
            ],
            currentPageSize: 0,
            pageCount: 0,
            imgUrl: '',
        }
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'order_number'
        },
        {
            title: '编号',
            dataIndex: 'admin_number'
        },
        {
            title: '用户名',
            dataIndex: 'admin_nickname'
        },
        {
            title: '账号名',
            dataIndex: 'admin_username'
        },
        {
            title: '创建时间',
            dataIndex: 'admin_createTime',
            render: admin_createTime => {
                return (
                    <span>{moment(admin_createTime).format('YYYY-MM-DD HH:mm:ss')}</span>
                )
            }
        },
        {
            title: '状态',
            dataIndex: 'admin_isable',
            render: admin_status => {
                let text = '';
                if (admin_status === '1') {
                    text = '启用';
                } else if (admin_status === '0') {
                    text = '停用';
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <div>
                        <EditAccounts data={data} refresh={() => this.handleRefreshAfterUpdate()}></EditAccounts>
                        {
                            data.admin_isable == '1' ? <Button style={{marginLeft: '10px'}} type="danger"
                                                               onClick={() => this.handleChangeAdminStatus(data.admin_id,0)}>停用</Button> :
                                <Button style={{marginLeft: '10px'}} type="primary"
                                        onClick={() => this.handleChangeAdminStatus(data.admin_id,1)}>启用</Button>
                        }
                        <Button style={{marginLeft: '10px'}} type="danger"
                                onClick={() => this.handleDeleteAdmin(data.admin_id)}>删除</Button>
                    </div>
                )
            }
        },
    ];

    render() {
        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    管理员账号管理
                </div>
                <AddAccounts refresh={() => this.handleRefreshAfterCreate()}></AddAccounts>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        dataSource={this.state.data}
                        loading={this.state.loading}
                        pagination={this.state.pagination}
                        onChange={this.handleTableChange}
                    />
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        this.searchAdminList({page: 1, size: 10});
    }

    /**
     * 获取搜索条件
     */
    handleGetValue(value) {
        const searchData = {project_name: value};
        this.setState({searchData});
        const param = {
            ...searchData
        };
        this.searchProject(param);
    }

    /**
     * 处理创建后刷新事件
     */
    handleRefreshAfterCreate() {
        const param = {page: 1, size: 10};
        this.searchAdminList(param);
    }

    /**
     * 处理删除后刷新事件
     */
    handleRefreshAfterDelete() {
        const param = {
            page: 1,
            size: 10
        };
        this.searchAdminList(param);
    }

    /**
     * 处理更新后刷新事件
     */
    handleRefreshAfterUpdate() {
        const {pagination} = this.state;
        const param = {
            page: pagination.current,
            size: pagination.pageSize
        };
        this.searchAdminList(param);
    }

    /**
     * 处理页码、显示数量变化事件
     * @param pagination
     * @param filters
     * @param sorter
     */
    handleTableChange = (pagination, filters, sorter) => {
        const current = pagination.current;
        const size = pagination.pageSize;
        const pagination1 = this.state.pagination;
        pagination1.current = current;
        pagination1.pageSize = size;
        this.searchAdminList({page: current, size});
    };

    /**
     * 查找管理员列表
     * @param param
     */
    searchAdminList(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(admin.SEARCH_ADMIN, param).then(result => {
            if (result.code === 1) {
                const data = result.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].order_number = i + 1;
                }
                const pagination = {total: result.count, current: param.page, pageSize: param.size};
                this.setState({pagination, data: data, loading: false});
            } else {
                app.alert(result.msg, 'info', 1);
                const pagination = {total: 0, current: 0, pageSize: 0};
                this.setState({pagination, data: [], loading: false});
            }
        });
    }

    /**
     * 删除账号
     * @param id
     */
    handleDeleteAdmin(id) {
        let _this = this;
        confirm({
            content: '您确定要删除该账号吗？',
            onOk() {
                app.post(admin.START_AND_STOP_ADMIN, {admin_id: id, admin_isable: '2'}).then((req) => {
                    if (req.code === 1) {
                        app.alert("删除成功", 'success', 1);
                        _this.handleRefreshAfterDelete();
                    } else {
                        app.alert(req.msg, 'info', 1);
                    }
                })
            },
            onCancel() {
            },
        });
    }

    /**
     * 修改账号状态
     * @param admin_id
     * @param type
     */
    handleChangeAdminStatus(admin_id,type){
        const _this=this;
        if(type===0){
            confirm({
                content: '您确定要停用该账号吗？',
                onOk() {
                    app.post(admin.START_AND_STOP_ADMIN, {admin_id: admin_id, admin_isable: '0'}).then((req) => {
                        if (req.code === 1) {
                            app.alert("停用成功", 'success', 1);
                            _this.handleRefreshAfterUpdate();
                        } else {
                            app.alert(req.msg, 'info', 1);
                        }
                    })
                },
                onCancel() {
                },
            });
        }else{
            app.post(admin.START_AND_STOP_ADMIN, {admin_id: admin_id, admin_isable: '1'}).then((req) => {
                if (req.code === 1) {
                    app.alert("启用成功", 'success', 1);
                    _this.handleRefreshAfterUpdate();
                } else {
                    app.alert(req.msg, 'info', 1);
                }
            })
        }
    }
}


class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project_name: ''
        }
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div style={{display: 'flex', marginTop: 10, marginBottom: 5}}>
                <div style={{display: 'flex', width: '220px', height: '28px'}}>
                    <div style={{width: 80, height: 28, lineHeight: '28px', color: '#000000'}}>用户名：</div>
                    <Input onPressEnter={() => this.handleSearchComplain1()} onChange={(e) => this.handleOnChange(e)}
                           type="text" placeholder="用户名"/>
                </div>
                <div style={{display: 'flex', width: '120px', height: '28px', marginLeft: 20}}>
                    <Button type="primary" onClick={() => this.handleSearchComplain1()}>搜索</Button>
                    <AddAccounts refresh={() => this.handleRefreshAfterCreate()}></AddAccounts>
                </div>
            </div>
        )
    };

    componentDidMount() {
    };

    /**
     * 处理账号输入框变化事件
     * @param e
     */
    handleOnChange(e) {
        this.setState({project_name: e.target.value});
    }

    /**
     * 获取搜索条件
     */
    handleSearchComplain1() {
        let {project_name} = this.state;
        this.props.clickSearch(project_name);
    };

    handleRefreshAfterCreate() {
        this.props.refresh();
    }
}

const SearchLists = Form.create()(SearchList);
const Admins = Form.create()(Admin);

export default Admins


